<template>
    <div class="page page-upload-create">
        <h2>上传图片 参考样例</h2>
        <div class="listview listview-form">

            <ul>
                <li>
                    <v-label :options="{label:'一行3张，默认最多传9张：', labelClass: 'light smaller'}"></v-label>
                </li>
                <li class="height-auto">
                    <v-upload-images v-model="imgList" desc="这里可传入备注说明..." :lazy-tag="true" @handle-uploaded-status="handleUploadedStatus"></v-upload-images>
                </li>
            </ul>
            <p class="desc">当前图片数：{{ this.imgList.length }}，当前上传状态：{{ uploaded.toString() }}</p>
            <p class="desc">参数：{{ imgArr }}</p>
        </div>
    </div>
</template>

<script>
    import vLabel from '../vendor/v-label.vue';
    import vUploadImages from '../vendor/v-upload-cloud-images.vue';
    import logger from '../js/utils/logger';

    export default {
        name: 'page-upload-create',

        components: { 'v-upload-images': vUploadImages, 'v-label': vLabel },

        data () {
            return {
                imgList: [],
                uploaded: true,

                imgArr: []
            };
        },

        watch: {
            imgList (val) {
                this.imgArr = [];
                val.forEach((v, i) => {
                    this.imgArr.push({idx: i, width: v.width, height: v.height});
                });
            }
        },

        mounted () {
            logger.log('upload-create mounted... ');

            // demo data
            setTimeout(() => {
                this.imgList = [
                    {
                        height: 242,
                        id: 1488507974065.317,
                        imageType: 'jpeg',
                        size: '10977',
                        src: '',
                        url: 'http://apr.qiniu.toon.mobi/FnkFw7vjnev3LrlqBA_uTGf6sAKm',
                        width: 402
                    },
                    {
                        height: 242,
                        id: 1488507974066.855,
                        imageType: 'jpeg',
                        size: '10977',
                        src: '',
                        url: 'http://apr.qiniu.toon.mobi/FnkFw7vjnev3LrlqBA_uTGf6sAKm',
                        width: 402
                    }
                ];
            }, 2000);
        },

        methods: {
            /**
             * 捕获图片上传状态，可根据此标识做提交按钮的限定等动作
             *              -- Author by Dio Zhu. on 2017.2.28
             */
            handleUploadedStatus (val) {
                logger.log('upload.handleUploadedStatus: ', val);
                this.uploaded = val;
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "../scss/variables";
    @import "../scss/mixins";

    .page-upload-create {
        h2 {
            margin-left: pxTorem(15px);
            line-height: pxTorem(40px);
        }

        .desc {
            height: pxTorem(28px);
            font-size: pxTorem(14px);
            line-height: pxTorem(28px);
            padding-left: pxTorem(15px);
            color: #777E8C;
            background: #f2f2f4;
        }

        .listview {
            .v-label {
                border: 0;
            }
        }
    }
</style>
